<template>
  <div class="tagList">
    <!-- 列表-->
    <van-cell-group inset>
      <van-swipe-cell v-if="props.content.length > 0" v-for="item in props.content" @open="handleOpen(item)">
        <van-cell center size="large" clickable :is-link="showRightArrow" :to="item.url">
          <!-- 使用 icon 插槽来自定义左侧图标 -->
          <template #icon>
            <i :class="item.icon" :style="{ color: item.iconColor }"></i>
          </template>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title" :class="{'active':item.info==''|| item.info==null}">{{ item.name }}</span>
          </template>
          <!-- 使用 value 插槽来自定义右边内容 -->
          <template #value>
            <van-tag v-if="item.tagName" v-text="item.tagName" :color="item.tagBgColor" :text-color="item.tagColor"
                     :style="{'--right':item.totalNum!=null||item.totalNum!=undefined?'5px':'10px'}"></van-tag>
            <slot :item="item" v-if="showRightSlot" name="rightSlot"></slot>
          </template>
          <template #label>
            <span v-text="item.info"></span>
          </template>
        </van-cell>
        <!--右侧滑动更多-->
        <template #right v-if="props.showMore">
          <slot :item="item" name="rightSlide"></slot>
        </template>
      </van-swipe-cell>
      <van-empty
          v-else
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="空列表"
      />
    </van-cell-group>
    <!-- 操作盒子-->
    <slot name="more"></slot>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2022年10月30日 14:16:19
import {toRaw} from "vue";
import useCollectEditStore from "@/stores/modules/collectEdit.js";

const props = defineProps({
  // 页面标题
  title: {
    type: String,
    default: "",
  },
  titleBottom: {
    type: String,
    default: "12px"
  },
  // 头部是否显示添加按钮
  showAddIcon: {
    type: Boolean,
    default: false
  },
  // 内容列表
  content: {
    type: Object,
    default: {},
  },
  // 是否显示右侧箭头
  showRightArrow: {
    type: Boolean,
    default: true
  },
  // 是否显示右侧自定义组件
  showRightSlot: {
    type: Boolean,
    default: false
  },
  // 是否显示右滑内容
  showMore: {
    type: Boolean,
    default: false
  },
});

/** 滑动选择的项 */
function handleOpen(val){
  useCollectEditStore().setContent(toRaw(val));
}
</script>

<style lang="less" scoped>
@textLeft: 8px;
.tagList {
  :deep(.van-cell-group) {
    box-shadow: 0 0 2px #fff, 0 0 4px #fff;

    .van-cell__label {
      position: relative;
      color: var(--primary-font-color);
      font-family: var(--primary-font-family);
    }

    .custom-title {
      font-size: 15px;
      font-family: var(--primary-font-family);
      font-weight: var(--primary-font-weight);
    }

    .van-cell__title {

    }

    .van-cell__value {
      display: flex;
      justify-content: flex-end;
    }

    .custom-title.active {
      position: absolute;
      bottom: v-bind(titleBottom);
      left: 36px;
      width: 54%;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .van-tag {
      max-width: 68px;
      min-width: 26px;
      display: inline-block;
      line-height: 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      right: var(--right);
      font-weight: var(--primary-font-weight);
      font-family: var(--primary-font-family);
    }

    .arrow-icon {
      font-size: 16px;
      color: #999999;
      line-height: inherit;
    }
  }
}
</style>
